<div id="Academicos" class="ajaxified">
    <div id="lista-datos-academicos">
        <table class="normal" id="tabla-datos-academicos">
            <thead>
                <tr>
                    <th>Nombre de la instituci&oacute;n</th>
                    <th>Nivel de posgrado</th>
                    <th>Fecha de graduaci&oacute;n</th>
                    <th>T&iacute;tulo recibido</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {foreach $historialAcademico as $historial}
                <tr id="a_{$historial@index}">
                    <td>
                        <span class="nombre-institucion">{$historial->getInstitucion()->getNombreInstitucion()}</span>
                    </td>
                    <td>
                        <span class="nivel-institucion">{$nivelesPosgrado[$historial->getNivelPosgrado()]|lower|capitalize}</span>
                    </td>
                    <td>
                        <span class="fecha-institucion">{$historial->getFechaGrado()|json_to_date:"d-M-Y"}</span>
                    </td>
                    <td>
                        <span class="titulo-institucion">{$historial->getHistorialAcademicoPk()->getTitulo()}</span>
                    </td>
                    <td>
                        {$pk = "CodigoInterno="|cat:$historial->getHistorialAcademicoPk()->getCodigoInterno()|cat:"&TituloRecibido="|cat:$historial->getHistorialAcademicoPk()->getTitulo()|cat:"&CodigoInstitucion="|cat:$historial->getHistorialAcademicoPk()->getCodigoInstitucion()}
                        <button name="{$deleteAcademico}&{$pk}"
                           title="Borrar"
                           class="delete-historial-institucion i_trashcan icon small">Borrar
                        </button>
                    </td>
                </tr>
                {foreachelse}
                <tr>
                    <td colspan="4">
                        No se ha registrado informaci&oacute;n.
                    </td>
                </tr>
                {/foreach}
            </tbody>
        </table>
    </div>

    <form method="post" action="{$addAcademico}" id="datos-academicos">
        <fieldset id="editor">
            <label id="add-historial"> Agregar Formación Académica</label>

                <input type="hidden" name="CodigoInterno" value="{$student->getCodigoInterno()}"/>
                <dl>
                    <label>Nombre de la Institu&oacute;n Educativa</label>
                    <div><input type="text" name="NombreInstitucion"/></div>
                </dl>
                <dl>
                    <label>Nivel de Posgrado</label>
                    <div>{html_options options=$nivelesPosgrado name="NivelPosgrado"}</div>
                </dl>
                <dl>
                    <label>T&iacute;tulo Recibido</label>
                    <div><input type="text" name="TituloRecibido" /></div>
                </dl>
                <dl>
                    <label>Fecha de Graduaci&oacute;n</label>
                    <div><input type="text" name="FechaDeGraduacion" class="datepicker" /></div>
                </dl>
                <dl>
                    <label></label>
                    <div>
                        <button id="add-datos-academico-button" class="i_plus icon small" >Guardar</button>
                        <button id="cancel-datos-academico-button" class="i_exclamation icon small"  >Cancelar</button>
                    </div>
                </dl>
        </fieldset>
    </form>
</div>

<script type="text/javascript" >
    //URLs for adding and editing
    var add = "{$addAcademico}";
    var edit = "{$editAcademico}";
    var Delete = "{$deleteAcademico}";
    
    var plegable = "#editor div";
    {literal}
jQuery.noConflict();
jQuery(document).ready(function($){
    $( ".datepicker" ).datepicker({
        dateFormat:"dd/mm/yy",
        changeMonth: true,
        changeYear: true
    });
    /**
     * Show Add/Edit form
     */
    jQuery("#add-historial").click(function(){
        $("#datos-academicos").attr("action", add);
    });


    jQuery("#cancel-datos-academico-button").click(function(){
        clearForm();
        return false;
    });

    function clearForm(){
        var $form = jQuery("#datos-academicos");
        $form.find('input[name="NombreInstitucion"]').val("");
        $form.find('input[name="TituloRecibido"]').val("");
        $form.find('input[name="FechaDeGraduacion"]').val("");
    }

    $("#datos-academicos").submit(function(){
        var url = $(this).attr("action") + "&ajax=true";
        var data = $(this).serialize();
        $.ajax({
            type: 'POST',
            url:url, 
            data:data, 
            beforeSend:beforeSend,
            success:function(result){
                $("#Academicos").parent().html(result);
            }
        });
        return false;
    });

    $(".delete-historial-institucion").click(function(){
        var url = $(this).attr("name") + "&ajax=true";
        $.ajax({
            url:url, 
            beforeSend:beforeSend,
            success:function(result){
                $("#Academicos").parent().html(result);
            }
        });
        return false;
    });
});//lista-datos-laborales
    {/literal}
</script>